<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body><!-- Table -->

<div id="app">
    <!-- Form -->
    <el-button type="text" @click="dialogMessageVisible = true"><h3>祝福</h3></el-button>
    <el-dialog title="送祝福" :visible.sync="dialogMessageVisible">
        <el-form :model="message">
            <el-form-item label="祝福语" :label-width="MessageLabelWidth">
                <el-input v-model="message.article" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogMessageVisible = false">取消</el-button>
            <el-button type="primary" @click="add()">提交</el-button>
        </div>
    </el-dialog>
</div>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data() {
            return {
                dialogTableVisible: false,
                dialogMessageVisible: false,
                message: {
                    campus: "北京通州",
                    nickname: "张三",
                    article: "哈哈哈"
                },
                MessageLabelWidth: '120px'
            };
        },
    })
</script>
</body>
</html>